// 从 vue-router 库导入创建路由和路由历史的函数
import { createRouter, createWebHistory } from 'vue-router'
// 导入各个视图组件，这些组件将作为路由的目标组件
import Home from '../views/Home.vue'// 首页组件
import Product from '../views/Product.vue' // 商品详情页组件
import Cart from '../views/Cart.vue'// 购物车组件
import Checkout from '../views/Checkout.vue'// 结算页组件
import Login from '../views/Login.vue' // 登录页组件
import Register from '../views/Register.vue'// 注册页组件
import Food from '../views/Food.vue'// 宠物食品列表页组件
import Breed from '../views/Breed.vue'// 宠物品种页组件
import Toy from '../views/Toy.vue'// 宠物玩具列表页组件
// 定义路由配置数组，每个对象代表一个路由规则
const routes = [
  {
    path: '/', // 根路径，对应网站首页
    name: 'Home', // 路由名称，用于通过名称跳转
    component: Home// 路径匹配时渲染的组件
  },
  {
    path: '/product/:id', // 动态路径，:id 是商品ID参数
    name: 'Product', // 路由名称
    component: Product// 渲染商品详情组件
  },
  {
    path: '/cart',// 购物车路径
    name: 'Cart',// 路由名称
    component: Cart // 渲染购物车组件
  },
  {
    path: '/checkout',// 结算路径
    name: 'Checkout',// 路由名称
    component: Checkout // 渲染结算组件
  },
  {
    path: '/login', // 登录路径
    name: 'Login',
    component: Login// 渲染登录组件
  },
  {
    path: '/register',// 注册路径
    name: 'Register',
    component: Register// 渲染注册组件
  },
  {
    path: '/food',// 宠物食品列表路径
    name: 'Food',
    component: Food // 渲染食品列表组件
  },
  {
    path: '/breed',// 宠物品种路径
    name: 'Breed',
    component: Breed // 渲染品种组件
  },
  {
    path: '/toy',// 宠物玩具列表路径
    name: 'Toy',
    component: Toy// 渲染玩具列表组件
  }
]
// 创建路由实例
const router = createRouter({
  // 使用 HTML5 History 模式，基于浏览器的 history API
  // process.env.BASE_URL 是项目的基础路径，由构建工具提供
  history: createWebHistory(process.env.BASE_URL),
  routes // 传入路由配置数组
})
// 导出路由实例，供主应用使用
export default router